<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1200" >
      <!-- <BasicForm @register="registerForm"/>-->
      <Description title="基础信息" :collapseOptions="{ canExpand: true, helpMessage: '详情' }" :column="3" :data="fromData" :schema="descItemCourseColumns" />

      <BasicTable  @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
      </template>
    </BasicTable>


  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicTable, useTable, TableAction} from '/@/components/Table';
    import { useListPage } from '/@/hooks/system/useListPage'
    import {BasicForm, useForm} from '/@/components/Form/index';
    import {detailcolumns,descItemCourseColumns,searchQueryDetail} from '../CsPurchaseCourseOrder.data';
    import {queryDetailByPurchaseId,updateUnsubStatus} from '../CsPurchaseCourseOrder.api';
    import { Description, DescItem, useDescription } from '/@/components/Description/index';
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    let fromData = ref({});
    let tabelData= ref([]);
    let detailId= ref('');
    
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        //await resetFields();
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        fromData.value = data.record;
        detailId.value =  data.record.id
        queryDetailByPurchaseId({id:data.record.id,nusubStatus:'1'}).then(res=>{
             tabelData.value=res;
        });
        //隐藏底部时禁用整个表单
       //setProps({ disabled: !data?.showFooter })
    });
    //设置标题
    const title = computed(() => ('详情'));
    
    const { prefixCls,tableContext } = useListPage({
      tableProps:{
           title: '购买科目单',
           columns:detailcolumns,
           canResize:false,
           dataSource:tabelData,
           showTableSetting:false,
           formConfig: {
              //labelWidth: 120,
              showActionButtonGroup:false
            },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            }
      }
  })
  const [registerTable, {reload}] = tableContext
  /**
    * 成功回调
    */
  function handleSuccess() {
       reload();
   }

 //审批操作
  async function handlUpdateStatus(record,status) {
    updateUnsubStatus({id:record.id,nusubStatus:status}).then(res=>{
        queryDetailByPurchaseId({id:detailId.value,nusubStatus:'1'}).then(res=>{
             tabelData.value = []
             tabelData.value=res;
        });
    })
   }


  /**
      * 操作栏
      */
  function getTableAction(record){
       return [
         {
           label: '审批',
           popConfirm: {
             title: '是否审批通过',
             confirm: handlUpdateStatus.bind(null, record,'2'),
             placement: 'topLeft',
             okText:'通过',
             cancelText:'驳回',
             cancel:handlUpdateStatus.bind(null, record,'0'),
           }
         }
       ]
   }


</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>